<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom查询</title>
    <script>


        /*定义一个函数，专门用来为指定元素绑定单击响应的函数
        *   参数：
                idstr  要绑定单击响应函数对象的id属性值
                fun    事件的回调函数，当单击元素时，该函数将会被触发
        */
        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }


        window.onload = function () {


            //查找#bj节点
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                var bj = document.getElementById("bj");
                alert(bj.innerHTML);
            }


            //查找所有li节点
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                var lis = document.getElementsByTagName("li");
                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
            }


            //查找name=gender的所有节点
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                var inputs = document.getElementsByName("gender");
                for (var i = 0; i < inputs.length; i++) {
                    alert(inputs[i].value);
                }
            }


            /*查找#city下所有li节点*/

            //绑定为id是btn04的按钮一个单击响应函数
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {

                //获取id为city的元素
                var city = document.getElementById("city");

                //查找#city下所有li节点
                var lis = city.getElementsByTagName("li");

                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
            }


            /*返回#city的所有子节点*/

            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                var city = document.getElementById("city");
                var cns = city.childNodes;
                for (var i = 0; i < cns.length; i++) {
                    alert(cns[i]);
                }
            }


            /*返回#phone的第一个子节点*/

            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                var phone = document.getElementById("phone");
                var fcd = phone.firstChild;
                alert(fcd);  //[object HTMLLIElement]

            }


            /*返回#bj的父节点*/

            var btn07 = document.getElementById("btn07");
            btn07.onclick = function () {
                var bj = document.getElementById("bj");
                var par = bj.parentNode;
                alert(par);  //[object HTMLUListElement]
            }


            /*返回#android的前一个兄弟节点*/

            myClick("btn08", function () {
                var android = document.getElementById("android");
                var pre = android.previousSibling;
                alert(pre);  //[object HTMLLIElement]
            });


            /*返回#username的value属性值*/

            myClick("btn09", function () {
                var username = document.getElementById("username");
                alert(username.value);
            });


            /*设置#username的value属性值*/

            myClick("btn10", function () {
                var username = document.getElementById("username");
                username.value = "fghijk";
            });


            /*返回bj的文本值*/

            myClick("btn11", function () {
                var bj = document.getElementById("bj");

                /*alert(bj.innerText);*/

                alert(bj.firstChild.nodeValue);
            });



        };
    </script>
</head>

<body class="clearfix">
    <div id="total" class="clearfix">
        <div class="inner clearfix">
            <p class="one">
                你喜欢哪个城市？
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

            <br>

            <p>
                你喜欢哪款单机游戏？
            </p>

            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>

            <br />
            <p>
                你手机操作系统是？
            </p>

            <ul id="phone">
                <li>IOS</li>
                <li id="android">Android</li>
                <li>Windows Phone</li>
            </ul>

        </div>

        <div class="inner2 clearfix">
            gender:
            <!-- radio单选按钮 -->
            <!-- 自结束标签 -->
            <input type="radio" name="gender" value="male" />
            Male:
            <input type="radio" name="gender" value="female" />
            Female:
            <br>
            <br>
            name:
            <input type="text" name="name" id="username" value="abcde" />
        </div>
    </div>

    <div id="btnlist">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有li节点</button></div>
        <div><button id="btn05">返回#city的所有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn07">返回#bj的父节点</button></div>
        <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回bj的文本值</button></div>
    </div>
</body>

</html>